<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1.组件间如何通信 -->
  父子组件props
  自定义事件
  Redux和Context

  <!-- 3.JSX本质是什么 -->
  React.createElement(tag/组件, 属性, 子属性)执行返回vnode

  <!-- 4.Context是什么，如何应用 -->
  父组件，向其下所有子孙节点传递信息，例如简单的公共信息，主题，颜色
  复杂的公共信息还是用redux

  <!-- 5.shouldComponentUpdate用途 -->
  性能优化；配合不可变值一起使用，否则会出错

  <!-- 6.redux单向数据流 -->
  见图

  <!-- 7.setState场景题 -->
  componentDidMount() {
    // count初始值 0
    this.setState({ count: this.state.count + 1})
    console.log('1', this.state.count) // 0
    this.setState({ count: this.state.count + 1})
    console.log('2', this.state.count) // 0

    setTimeout(() => {
      this.setState({ count: this.state.count + 1})
      console.log('3', this.state.count) // 2
    })

    setTimeout(() => {
      this.setState({ count: this.state.count + 1})
      console.log('3', this.state.count) // 3
    })
  }

  <!-- 8.什么是纯函数 -->
  返回一个新值并且没有副作用（不会影响原函数）
  重点：不可变值
  如 newArr = arr.slice()

  <!-- 9.React组件生命周期 -->
  见图

  <!-- 10.React发起ajax应该放在那个生命周期上 -->
  shouldComponentDidMount 同vue
  在DOM渲染完再去发送ajax请求这样页面渲染更加的流畅

  <!-- 11.渲染列表为什么使用key -->
  diff算法中通过tag和key来判断是否是sameNode
  减少了渲染次数，提升性能
  不能是index或者随机数

  <!-- 12.函数组件和class组件的区别 -->
  纯函数，输入props输出jsx
  没有实例，没有声明周期，没有state
  不能拓展其他方法

  <!-- 13.什么是受控组件 -->
  表单的值受到state控制
  需要自行监听onChange，更新state
  对比非受控组件

  <!-- 14.何时使用异步组件 -->
  同Vue，加载大组件，路由懒加载

  <!-- 15.多个组件公共逻辑，如何抽离 -->
  高阶组件；Render Props

  <!-- 16.redux如何进行异步请求 -->
  使用action redux-thunk中间件

  <!-- 17.react-router如何使用懒加载 -->
  const Home = React.lazy(() => import(../component))
  <Route path='/about' component={Home}></Route>

  <!-- 18.PureComponent有何区别 -->
  实现了先比较shouldComponentUpdate
  性能优化
  但是结合不可变值使用

  <!-- 19.React事件和DOM事件的区别 -->
  所有事件挂载到document上；event不是原生的，是SyntheticEvent合成事件
  dispatchEvent机制

  <!-- 20.React性能优化 -->
  渲染列表加key 
  自定义事件 DOM事件及时销毁
  合理使用异步组件
  减少bind this使用次数
  合理使用SCU PureComponent和memo
  合理使用Immutable.js 
  webpack层面的优化
  前端通用的性能优化，如图片懒加载
  使用SSR

  <!-- 21.React和Vue的区别 -->
  共同点：
  1.都支持组件化
  2.都是数据驱动视图
  3.都使用vdom操作DOM
  不同点：
  React使用JSX拥抱JS，Vue使用模板拥抱html 
  React函数式编程，Vue声明式编程
  React更多需要自力更生，Vue把想要的都给了


  















</body>
</html>